<template>
  <div>
    <search-list ref="filmList" :api-url="$url.FilmList" :option="searchOpt" :itemPerRow="3">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="名称"></el-table-column>
      <el-table-column prop="cover" label="封面">
        <template slot-scope="scope">
          <div class="cover">
            <img :src="scope.row.cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="onlineDay" label="上映时间"></el-table-column>
      <el-table-column prop="category" label="影视类型"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑信息</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after">
        <el-button type="success" @click="addWorks">
          新增作品
        </el-button>
      </div>
    </search-list>
    <el-dialog width="500px" :visible.sync="dialogShow" @close="clear">
      <el-form label-position="top">
        <el-form-item label="作品名称">
          <el-input v-model.trim="form.title"></el-input>
        </el-form-item>
        <el-form-item prop="cover" label="作品封面">
          <div class="cover-box">
            <div class="cover-box-image" v-if="form.cover">
              <img :src="form.cover" />
            </div>
            <upload-resource is-public @upload="setCoverFile" folder="asset"></upload-resource>
          </div>
        </el-form-item>
        <el-form-item prop="onlineDay" label="上映时间">
          <el-date-picker
            v-model="form.onlineDay"
            type="date"
            placeholder="选择上映时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="category" label="影视类型">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="boxOffice" label="票房">
          <el-input v-model="form.boxOffice" type="text" placeholder="请输入票房(单位元)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">取 消</el-button>
        <el-button type="success" @click="save" icon="el-icon-check">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import UploadResource from 'comp/UploadResource';
  export default {
    data() {
      return {
        dialogShow: false,
        options: [
          { value: '电影', label: '电影' },
          { value: '剧集', label: '剧集' },
          { value: '综艺', label: '综艺' },
          { value: '短片', label: '短片' },
        ],
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'id',
            label: 'ID',
          },
          {
            type: 'filmCate',
            name: 'category',
            label: '影视类型',
          },
        ],
        form: {
          id: '',
          title: '',
          cover: '',
          onlineDay: '',
          category: '',
          boxOffice: '',
        },
      };
    },
    components: {
      UploadResource,
    },
    methods: {
      edit(row) {
        this.dialogShow = true;
        this.form.id = row.id;
        this.form.cover = row.cover;
        this.form.title = row.title;
        this.form.onlineDay = row.onlineDay;
        this.form.category = row.category;
        this.form.boxOffice = row.boxOffice;
      },
      setCoverFile(data) {
        this.$set(this.form, 'cover', data.url);
      },
      save() {
        this.$service.FilmSave({ ...this.form }).then((res) => {
          this.$message.success('操作成功');
          this.dialogShow = false;
          this.$refs.filmList.getList();
        });
      },
      dialogClose() {
        this.dialogShow = false;
      },
      addWorks() {
        this.dialogShow = true;
      },
      clear() {
        this.dialogVisible = false;
        this.form.cover = '';
        this.form.title = '';
        this.form.onlineDay = '';
        this.form.category = '';
        this.form.boxOffice = '';
      },
    },
  };
</script>
<style lang="less" scoped>
  .cover {
    width: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .cover-box {
    display: flex;
    align-items: flex-start;

    &-image {
      width: 200px;
      // height: 150px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-item {
      width: 200px;
      // height: 100px;
      margin-right: 5px;
      cursor: pointer;
      &.active,
      &:hover {
        border: 2px solid #ffc600;
      }
    }
  }
</style>
